<template>
  <swiper :options="swiperOption">
    <!-- slides -->
    <swiper-slide v-for="item in swiperList" :key="item.id">
        <img class="swiper-img" :src="item.imgUrl">
    </swiper-slide>
    <!-- Optional controls -->
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
</template>
<script>
export default {
  name: "HomeSwiper",
  data(){
      return {
          swiperOption: {
             pagination: '.swiper-pagination',
             loop: true
          },
          swiperList: [
              {id:'0001',imgUrl:'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20194/5558e5b96782e91c01c52163bd315253.jpg_750x200_5031d0cc.jpg'},
              {id: '0002',imgUrl:'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20194/2680ea76118c1fc8f5d44b4240c20275.jpg_750x200_42900395.jpg'}
          ]
      }
  }
};
</script>
<style lang="stylus" scoped>
    .swiper-img
        width 100%
    >>> .swiper-pagination-bullet-active
         background-color #fff
</style>